<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-10-19 19:45:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-11-04 07:28:16
-->
<template>
  <div>
    <h2>会员管理</h2>
    <header>
      <el-input
        placeholder="请输入会员Id"
        v-model="search"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="serach"
        ></el-button>
      </el-input>
      <!-- <el-button type="primary" plain @click="handleAddVip" class="add"
        >添加会员</el-button> -->
    </header>
    <el-table
      :data="(vipData = searchArr.length != 0 ? searchArr : vipData)"
      style="width: 100%"
    >
      <el-table-column label="用户ID" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信ID" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.wechatId }}</span>
        </template>
      </el-table-column>
     
      <el-table-column prop="headPortraitUrl" label="微信头像" width="120">
        <template slot-scope="scope">
          <img src=""/>
            <!-- :src="`${url}/member/download/${scope.row.headPortraitUrl}`" -->
          <img
            v-if="scope.row.headPortraitUrl != null"
             :src="`http://47.105.167.245:9992/member/download/${scope.row.headPortraitUrl}`"
            height="70px" width="80px"/>
        </template>
      </el-table-column>
      <el-table-column label="微信昵称" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.telPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近活跃时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.status === 1 ? "正常" : "锁定"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="180">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.status==1" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status==1"
            @click="handleDelete(scope.$index, scope.row)"
            >停用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑会员信息 -->
    <el-dialog
      :title="编辑会员"
      :visible.sync="dialogFormVisible"
      @close="closeFormVisible"
    >
      <el-form
        :model="editForm"
        ref="editForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户ID" prop="code">
          <el-input v-model="editForm.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="微信ID" prop="wechatId">
          <el-input v-model="editForm.wechatId" disabled></el-input>
        </el-form-item>
        <el-form-item label="微信昵称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telPhone">
          <el-input v-model="editForm.telPhone"></el-input>
        </el-form-item>
       <el-form-item label="上传图片">
                <el-upload
                  class="avatar-uploader"
                  :action="`http://47.105.167.245:9992/member/upload`"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="editForm.headPortraitUrl!=null" :src="`http://47.105.167.245:9992/member/download/${editForm.headPortraitUrl}`" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveEdit()">确定</el-button>
      </div>
    </el-dialog>
   
    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size.sync="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total.sync="total"
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>

<script>
import { getVipList, updateVip, findVipById,deleteVipById } from "@/api/vip";
import axios from "axios";
export default {
  name: "MemberList",
  data() {
    return {
      url:'http://47.105.167.245:9992',
      vipData: [], // 表格数据
      search: "",
      addForm: {},
      // 编辑表单
      editForm: {
        id: 1,
        code: "",
        wechatId: "",
        name: "",
        telPhone: "",
        tel: "",
        headPortraitUrl: "",
      },
   
      addDialogVisible: false, //添加会员弹框
      // 是否显示编辑表单
      editDialogVisible: false,
      dialogFormVisible: false,
      pagenum: 1,
      pagesize:5,
      total: 0,
      searchArr: [],
      editDialog:{}
    };
  },
  created() {
    // 获取会员列表数据
    this.getList();
  },
  methods: {
    // 请求表格数据
    async getList() {
      console.log(this.pagesize, this.pagenum);
      let res = await getVipList(this.pagenum, this.pagesize);
      this.vipData = res.result.list;
      this.total = res.result.total;
      console.log( "count", this.vipData)
    },
   
    // 编辑
   async  handleEdit(index, row) {
      this.dialogFormVisible = true;
      let res=await findVipById(row.id);
      console.log("res",res)
      this.editForm=res.result.member
      console.log("editDialog",this.editForm)
     
    },
    // 保存修改
    async handleSaveEdit() {
      console.log("editForm",this.editForm)
      let res = await updateVip(this.editForm);
      this.dialogFormVisible = false;
      console.log("res", res);
        this.getList();
    },
    closeFormVisible: function () {
      this.editForm = {};
    },
    //搜索
    async serach() {
      let res = await findVipById(this.search);
      console.log(res);
      this.searchArr = [res.result.member];
    },
    // 删除
 handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除会员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            deleteVipById(row.id).then(res=>{
              console.log(res)
            });
          console.log(res)
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
     beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   alert(1)
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //    alert(2)
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // alert(3)
        // return isJPG && isLt2M;
      },
  },
};
</script>

<style lang="scss" scoped>
.input-with-select {
  width: 80%;
}
.header {
  display: flex;
}
.add {
  margin-left: 10px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
</style>
